<template>
  <div>
    <el-form :inline="true" :model="searchParams" class="demo-form-inline">
    <el-form-item label="关键字">
      <el-input v-model="searchParams.keyWords" placeholder="请输入关键字" />
    </el-form-item>
    <el-date-picker
          v-model="searchParams.rangeDate"
          type="daterange"
          range-separator="至"
          start-placeholder="初始时间"
          end-placeholder="结束时间"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
          size="default"
      />
    <el-form-item>
      <el-button  class="seach-button" type="primary"  @click="onSearch">查询</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, defineProps } from 'vue';
import { reactive, ref } from 'vue';
import { useRoute, useRouter } from "vue-router";
// router是路由实例和方法
const router = useRouter();
const searchParams = reactive({
  keyWords: '',
  rangeDate: []
})
// 提前定义 自定义事件名
const emit = defineEmits(['Search'])
const onSearch = () => {
  emit('Search',searchParams)
  router.go(0);
}
</script>

<style scoped lang="scss">
el-date-picker{
  position: relative;
  top: -10px;
}
.cate-lists{
  .demo-form-inline{
    .seach-button{
      // position: absolute;
      // top: 10px;
      // margin-top: 30px;
      margin-left: 20px;
    }
  }
  .page-jumpe{
    margin-top: 20px;
  }
}
</style>